<template>
    <div class="mb-footer">
        <p class="mb-footer_copyright">© 2025 XAUUSD. {{$t('footer.allRightsReserved')}}</p>
        <div class="mb-footer_link l-f l-row-c">
            <a class="mb-footer_link_box" target="_black" v-for="(item,index) in linkList" :key="index">
                <img class="mb-footer_link_box_img" :src="item.icon" />
            </a>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import IconLink1 from '@/assets/icons/icon-link_1.svg'
import IconLink2 from '@/assets/icons/icon-link_2.svg'
import IconLink3 from '@/assets/icons/icon-link_3.svg'
import IconLink4 from '@/assets/icons/icon-link_4.svg'
import IconLink5 from '@/assets/icons/icon-link_5.svg'

const linkList = reactive([
    {
        icon: IconLink1,
        link: 'https://www.facebook.com/'
    },
    {
        icon: IconLink2,
        link: 'https://twitter.com/'
    },
    {
        icon: IconLink3,
        link: 'https://www.instagram.com/'
    },
    {
        icon: IconLink4,
        link: 'https://www.linkedin.com/'
    },
    {
        icon: IconLink5,
        link: 'https://www.youtube.com/'
    }
])
</script>

<style lang="scss" scoped>
.mb-footer {
    &_copyright {
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        padding: 25px 0;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,255,255,.5);
    }
    &_link {
        padding: 25px 0;
        box-sizing: border-box;
        gap: 10px;
        &_box {
            &_img {
                width: 38px;
                height: 38px;
            }
        }
    }
}
</style>